{% extends "./inc_base.html" %}
{% block style %}
<link href="/static/assets/css/layout-shop.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/static/assets/plugins/share/css/share.min.css">
{% endblock %}
{% block content %}
{%if category.pid !=0%}
{%column data="column",pid=category.pid%}
{%else%}
{%column data="column",cid=category.id%}
{%endif%}
<!--
PAGE HEADER

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->
<section class="page-header page-header-xs">
    <div class="container">
        {%if column|length>0%}
        <h1>{{category.title}}</h1>
        {%endif%}
        <!-- breadcrumbs -->
        <ol class="breadcrumb {%if column|length==0%} breadcrumb-inverse {%endif%}">
            <li><a href="/">首页</a></li>
            {%for val in breadcrumb %}
            <li><a href="{{val.url}}">{{val.title}}</a></li>
            {%if column|length==0%} <li>{{info.title}} </li>{%endif%}
            {% endfor %}
        </ol> <!-- /breadcrumbs -->

        <!-- page tabs -->
        {%if column|length >0%}
        <ul class="page-header-tabs list-inline">
            <li {%if breadcrumb[0].id == category.id %}class="active"{%endif%}><a href="{{breadcrumb[0].url}}">全部</a></li>
            {%for val in column%}
            <li  {%if val.id == category.id %}class="active"{%endif%}><a href="{{val.url}}">{{val.name}}</a></li>
            {%endfor%}
        </ul>
        {%endif%}<!-- /page tabs -->
    </div>
</section>
<!-- /PAGE HEADER -->
<!-- -->
<section>
    <div class="container">

        <div class="row">

            <!-- RIGHT -->
            <div class="col-lg-10 col-md-10 col-sm-10">
                <div class="panel panel-default tabs">
                    <div class="panel-heading panel-heading-transparent">
                        <h2 class="panel-title">{{info.title}}</h2>
                    </div>

                    <div class="panel-body">
                        <div class="row">

                            <!-- IMAGE -->
                            <div class="col-lg-6 col-sm-6">
                                {% set pic = info.pics|strToArray%}
                                <div class="thumbnail relative margin-bottom-3 ">


                                    <!--
                                    IMAGE ZOOM

                                    data-mode="mouseover|grab|click|toggle"
                                    -->
                                    <figure id="zoom-primary" class="zoom" data-mode="mouseover">
                                        <!--
                                        zoom buttton

                                        positions available:
                                        .bottom-right
                                        .bottom-left
                                        .top-right
                                        .top-left
                                        -->
                                        <a class="lightbox bottom-right" href="{{pic[0]|get_pic('m=0')}}" data-plugin-options='{"type":"image"}'><i class="glyphicon glyphicon-search"></i></a>

                                        <!--
                                        image

                                        Extra: add .image-bw class to force black and white!
                                        -->
                                        <img class="img-responsive" src="{{pic[0]|get_pic('m=1,w=800,h=800')}}"  alt="This is the product title" />
                                    </figure>

                                </div>

                                <!-- Thumbnails (required height:100px) -->
                                {% if pic|length >1%}
                                <div data-for="zoom-primary" class="zoom-more owl-carousel owl-padding-3 featured nomargin-bottom"
                                     data-plugin-options='{"singleItem": false, "autoPlay": false, "navigation": true, "pagination": false,"itemsMobile":[479,5]}'>
                                    {%set i = 0%}
                                    {% for val in pic%}
                                    <a class="thumbnail nomargin-bottom {%if i == 0%}active{%endif%}" href="{{val|get_pic('m=1,w=800,h=800')}}">
                                        <img src="{{val|get_pic('m=2,w=100,h=100')}}" height="100" alt="" />
                                    </a>
                                    {%set i=i+1%}
                                    {% endfor %}

                                </div>
                                {% endif %}
                                <!-- /Thumbnails -->

                            </div>
                            <!-- /IMAGE -->

                            <!-- ITEM DESC -->
                            <div class="col-lg-6 col-sm-6">

                                <!-- buttons -->
                                <div class="pull-right">
                                    <!-- replace data-item-id width the real item ID - used by js/view/demo.shop.js -->
                                    <a class="btn btn-default add-wishlist" href="#" data-item-id="1" data-toggle="tooltip" title="Add To Wishlist"><i class="fa fa-heart nopadding"></i></a>
                                    <a class="btn btn-default add-compare" href="#" data-item-id="1" data-toggle="tooltip" title="Add To Compare"><i class="fa fa-bar-chart-o nopadding" data-toggle="tooltip"></i></a>
                                </div>
                                <!-- /buttons -->

                                <!-- price -->
                                <div class="shop-item-price text-danger">
                                    {% if info.price|get_price_format('2') %}<span class="line-through nopadding-left">¥{{info.price|get_price_format('2')}}</span>{%endif%}
                                    ¥<price>{{info.price|get_price_format('1')}}</price>
                                </div>
                                <!-- /price -->

                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>

                                <div class="clearfix margin-bottom-30" >
                                    <div class="pull-right" id="stock">
                                        {% if info.total_stock != 0%}

                                        <span class=" text-success" ><i class="fa fa-check"></i> 有货 <span class="badge badge-aqua btn-xs ">{{info.total_stock}}</span></span>
                                        {% else%}
                                        <span class="pull-right text-danger"><i class="glyphicon glyphicon-remove"></i> 无货</span>
                                        {% endif %}
                                    </div>
                                    <strong>商家编码:</strong> {{info.goods_no}}
                                </div>
                                {#
                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                <!-- countdown -->
                                <div class="text-center">
                                    <h5>折扣时间</h5>
                                    <div class="countdown" data-from="January 31, 2018 15:03:26" data-labels="年,月,周,天,时,分,秒"><!-- Example Date From: December 31, 2018 15:03:26 --></div>
                                </div>
                                <!-- /countdown -->
                                #}
                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>

                                <!-- FORM -->
                                <form class="clearfix form-inline nomargin ichecks"   data-icheck-info ="{{info.suk}}">
                                    <!--{{info.suk}}-->
                                    {% if info.suk %}
                                    {% set suk = info.suk|strToJson%}
                                    {% set i = 0 %}
                                    {% for item in suk.type%}
                                    <div class="icheck m-b clearfix shop-sku" >
                                        <div class="item dt pull-left text-justify text-right">
                                            {{item}}:
                                        </div>
                                        <div class="itemnbox">
                                            {% if i == 0 %}
                                            {% for _item in suk.data %}
                                            <!--{{suk.data[0].name}}-->

                                            <div class="item">
                                                <input type="radio"  name="size1" value="{{_item.name}}" >
                                                <label >{%if suk.is_pic == 1%}<img class="m-r-xs" height="30" alt="" data-src="{{_item.pic|get_pic('m=1,w=800,h=800')}}" src="{{_item.pic|get_pic('m=2,w=30,h=30')}}">{%endif%}{{_item.name}}</label>
                                            </div>

                                            {% endfor %}

                                            {% elif i==1 %}
                                            {% for _item in suk.data[0].ch %}
                                            <!--{{suk.data[0].name}}-->
                                            <div class="item">
                                                <input type="radio"  name="size2" value="{{_item.name}}" >
                                                <label >{{_item.name}}</label>
                                            </div>
                                            {% endfor %}
                                            {% else %}
                                            {% for _item in suk.data[0].ch[0].ch %}
                                            <!--{{suk.data[0].name}}-->
                                            <div class="item">
                                                <input type="radio"  name="size3" value="{{_item.name}}" >
                                                <label >{{_item.name}}</label>
                                            </div>
                                            {% endfor %}
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% set i = i+1%}
                                    {% endfor %}
                                    <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                    {% endif %}
                                    <input type="hidden" name="product_id" value="{{info.id}}" />
                                    <input type="hidden" id="type" name="type" value="" />
                                    <!-- see assets/js/view/demo.shop.js -->

                                    <input type="hidden" id="qty" name="qty" value="1" />

                                    <!-- see assets/js/view/demo.shop.js -->
                                    <div  id="out-of-stock" class="{% if info.total_stock != 0%}hide{% endif %}">

                                        <!-- buttons -->
                                        <div class="shop-item-buttons text-center ">
                                            <span class="out-of-stock">已售罄</span><!-- add .clean to remove css characteres -->
                                        </div>
                                        <!-- /buttons -->
                                    </div>
                                    <div id="in-of-stock" class="{% if info.total_stock == 0%}hide{% endif %}">
                                        <div class="btn-group pull-left product-opt-qty {% if info.total_stock == 0%}hide{% endif %}">
                                            <button type="button" class="btn btn-default dropdown-toggle product-qty-dd noradius" data-toggle="dropdown">
                                                <span class="caret"></span>
                                                数量 <small id="product-selected-qty">(<span>1</span>)</small>
                                            </button>

                                            <ul id="product-qty-dd" class="dropdown-menu clearfix" role="menu">
                                                <li class="active"><a data-val="1" href="#">1</a></li>
                                                <li><a data-val="2" href="#">2</a></li>
                                                <li><a data-val="3" href="#">3</a></li>
                                                <li><a data-val="4" href="#">4</a></li>
                                                <li><a data-val="5" href="#">5</a></li>
                                                <li><a data-val="6" href="#">6</a></li>
                                                <li><a data-val="7" href="#">7</a></li>
                                                <li><a data-val="8" href="#">8</a></li>
                                                <li><a data-val="9" href="#">9</a></li>
                                                <li><a data-val="10" href="#">10</a></li>
                                            </ul>
                                        </div><!-- /btn-group -->

                                        <button class="btn btn-danger pull-left product-add-cart noradius "> <i class="fa fa-cart-plus "></i> 添加到购物车</button>
                                    </div>

                                </form>
                                <!-- /FORM -->


                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                {% if info.description %}
                                <!-- short description -->
                                <small class="text-muted">{{info.description}}</small>
                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                <!-- /short description -->
                                {% endif %}



                                <!-- Share -->
                                <div class="pull-right">
                                    <div class="social-share" data-disabled="google,twitter,facebook,diandian" ></div>
                                </div>
                                <!-- /Share -->


                                <!-- rating -->
                                <div class="rating rating-5 size-13 margin-top-10 width-100"><!-- rating-0 ... rating-5 --></div>
                                <!-- /rating -->

                            </div>
                            <!-- /ITEM DESC -->

                        </div>
                    </div>
                    {% rkeywords data ="tags",type="0",mod_id=info.model_id,id=info.id%}
                    {%if tags%}
                    <div class="panel-footer panel-footer-transparent">
                        <!-- TAGS -->

                        {%set color = ["btn-primary","btn-success","btn-info","btn-warning","btn-danger"]%}
                        {%for k in tags%}
                        <a href="{{k.url}}" class="btn {{color|random}} btn-xs relative">
                            {{k.keyname}}
                        </a>
                        {%endfor%}
                        <!-- /TAGS -->
                    </div>
                    {%endif%}
                    <div class="panel-footer">
                        <ul class="pager nomargin">
                            {%if previous.id%}
                            <li class="previous"><a class="noborder" href="{{previous.name|get_url(previous.id)}}" title="{{previous.title}}">&larr; 上一个:{{previous.title|truncate(30)}}</a></li>
                            {%endif%}
                            {%if next.id%}
                            <li class="next"><a class="noborder" href="{{next.name|get_url(next.id)}}" title="{{next.title}}">下一个:{{next.title|truncate(30)}} &rarr;</a></li>
                            {%endif%}
                        </ul>
                    </div>
                    <div class="panel-footer nopadding">
                        <ul id="myTab" class="nav nav-tabs " role="tablist" style="margin: -1px">
                            <li role="presentation" class="active"><a href="#description" role="tab" data-toggle="tab">商品介绍</a></li>
                            {#
                            <li role="presentation"><a href="#specs" role="tab" data-toggle="tab">规格参数</a></li>
                            <li role="presentation"><a href="#reviews" role="tab" data-toggle="tab">商品评价 (2)</a></li>
                            #}
                        </ul>
                    </div>
                    <div class="tab-content panel-body padding-15">
                        <!-- DESCRIPTION -->
                        <div role="tabpanel" class="tab-pane fade in active" id="description">
                            <!--页面内容钩子加载-->
                            {{content(pagehook)}}
                            <!--/页面内容钩子加载结束-->
                        </div>
                       {#
                        <!-- SPECIFICATIONS -->
                        <div role="tabpanel" class="tab-pane fade" id="specs">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>Column name</th>
                                        <th>Column name</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Size</td>
                                        <td>2XL</td>
                                    </tr>
                                    <tr>
                                        <td>Color</td>
                                        <td>Red</td>
                                    </tr>
                                    <tr>
                                        <td>Weight</td>
                                        <td>132lbs</td>
                                    </tr>
                                    <tr>
                                        <td>Height</td>
                                        <td>74cm</td>
                                    </tr>
                                    <tr>
                                        <td>Bluetooth</td>
                                        <td><i class="fa fa-check text-success"></i> YES</td>
                                    </tr>
                                    <tr>
                                        <td>Wi-Fi</td>
                                        <td><i class="glyphicon glyphicon-remove text-danger"></i> NO</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- REVIEWS -->
                        <div role="tabpanel" class="tab-pane fade" id="reviews">
                            <!-- REVIEW ITEM -->
                            <div class="block margin-bottom-60">

<span class="user-avatar"><ucuser-avatar -->
<img class="pull-left media-object" src="/static/assets/images//avatar2.jpg" width="64" height="64" alt="">
</span>

                                <div class="media-body">
                                    <h4 class="media-heading size-14">
                                        John Doe &ndash;
                                        <span class="text-muted">June 29, 2014 - 11:23</span> &ndash;
                                        <span class="size-14 text-muted"><!-- stars -->
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</span>
                                    </h4>

                                    <p>
                                        Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.
                                    </p>

                                </div>

                            </div>
                            <!-- /REVIEW ITEM -->

                            <!-- REVIEW ITEM -->
                            <div class="block margin-bottom-60">

<span class="user-avatar"><ucuser-avatar -->
<img class="pull-left media-object" src="/static/assets/images//avatar2.jpg" width="64" height="64" alt="">
</span>

                                <div class="media-body">
                                    <h4 class="media-heading size-14">
                                        John Doe &ndash;
                                        <span class="text-muted">June 29, 2014 - 11:23</span> &ndash;
                                        <span class="size-14 text-muted"><!-- stars -->
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</span>
                                    </h4>

                                    <p>
                                        Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.
                                    </p>

                                </div>

                            </div>
                            <!-- /REVIEW ITEM -->


                            <!-- REVIEW FORM -->
                            <h4 class="page-header margin-bottom-40">ADD A REVIEW</h4>
                            <form method="post" action="#" id="form">

                                <div class="row margin-bottom-10">

                                    <div class="col-md-6 margin-bottom-10">
                                        <!-- Name -->
                                        <input type="text" name="name" id="name" class="form-control" placeholder="Name *" maxlength="100" required="">
                                    </div>

                                    <div class="col-md-6">
                                        <!-- Email -->
                                        <input type="email" name="email" id="email" class="form-control" placeholder="Email *" maxlength="100" required="">
                                    </div>

                                </div>

                                <!-- Comment -->
                                <div class="margin-bottom-30">
                                    <textarea name="text" id="text" class="form-control" rows="6" placeholder="Comment" maxlength="1000"></textarea>
                                </div>

                                <!-- Stars -->
                                <div class="product-star-vote clearfix">

                                    <label class="radio pull-left">
                                        <input type="radio" name="product-review-vote" value="1" />
                                        <i></i> 1 Star
                                    </label>

                                    <label class="radio pull-left">
                                        <input type="radio" name="product-review-vote" value="2" />
                                        <i></i> 2 Stars
                                    </label>

                                    <label class="radio pull-left">
                                        <input type="radio" name="product-review-vote" value="3" />
                                        <i></i> 3 Stars
                                    </label>

                                    <label class="radio pull-left">
                                        <input type="radio" name="product-review-vote" value="4" />
                                        <i></i> 4 Stars
                                    </label>

                                    <label class="radio pull-left">
                                        <input type="radio" name="product-review-vote" value="5" />
                                        <i></i> 5 Stars
                                    </label>

                                </div>

                                <!-- Send Button -->
                                <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Send Review</button>

                            </form>
                            <!-- /REVIEW FORM -->

                        </div>
                        #}
                    </div>
                </div>

            </div>


            <!-- LEFT -->
            <!-- LEFT -->
            <div class="col-lg-2 col-md-2 col-sm-2">
                <!-- INLINE SEARCH -->
                <div class="inline-search clearfix margin-bottom-20">
                    <form action="/search" method="get" class="widget_search" target="_blank">
                        <input type="search" placeholder="请输入关键词..." id="q" name="q" class="serch-input">
                        <button type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
                <!-- /INLINE SEARCH -->
                <!-- CATEGORIES -->
                <div class="panel panel-default side-nav">
                    <div class="panel-heading">
                        <h2 class="panel-title">{{breadcrumb[0].title}}分类</h2>
                    </div>
                    <div class="panel-body" style="padding: 10px 0 0 10px">
                        <ul class="list-group list-group-bordered  uppercase nomargin">
                            <!--{{breadcrumb[1].id}}-->
                            {% column data="clist",tree=breadcrumb[0].id %}
                            {% column data="clist",tree=breadcrumb[0].id %}
                            {% for val in clist %}
                            <!--{%if breadcrumb[1].id == val.id%} active {%endif%}-->
                            <li class="list-group-item {%if breadcrumb[1].id == val.id%}active {%endif%} ">
                                <a  {% if val.children %}class="dropdown-toggle "{%endif%} href="{{val.url}}">{{val.name}}</a>
                                {% if val.children %}
                                <ul >
                                    {% for _val in val.children %}
                                    <li class="{%if breadcrumb[2].id == _val.id%}active {%endif%}"><a href="{{_val.url}}"><span class="size-11 text-muted pull-right">(123)</span> {{_val.name}}</a></li>
                                    {%endfor%}

                                </ul>
                                {%endif%}
                            </li>
                            {%endfor%}

                        </ul>.
                    </div>
                </div>

                <!-- /CATEGORIES -->
                <div class="panel panel-default hotgoods">
                    <div class="panel-heading">
                        <h2 class="panel-title">热卖</h2>
                    </div>
                    {%topic data="hotgoods",limit="9",cid=category.id,type="hot",cache="1000"%}
                    <div class="panel-body padding-10" >
                        <div class="owl-carousel featured nomargin" data-plugin-options='{"singleItem": true, "stopOnHover":false, "autoPlay":false, "autoHeight": false, "navigation": true, "pagination": false}'>
                            {%- for items in hotgoods | slice(3) %}
                            <div><!-- SLIDE 1 -->
                                <ul class="list-unstyled nomargin nopadding text-left">
                                    {%- for item in items %}
                                    {% set pic = item.pics|strToArray%}
                                    <li class="clearfix"><!-- item -->
                                        <div class="thumbnail featured clearfix nomargin" style="height: 150px;overflow: hidden">
                                            <a href="{{item.name|get_url(item.id)}}" target="_blank">
                                                <img src="{{pic[0]|get_pic('m=1,w=140,h=140')}}" width="141" height="141" alt="featured item">
                                            </a>
                                        </div>
                                        <div class="size-16 text-left text-danger">
                                            ¥{{item.price|get_price_format('1')}}</div>
                                        <div class="rating rating-5 size-13 width-100 text-left"><!-- rating-0 ... rating-5 --></div>
                                        <a class="block size-12 elipsis" href="{{item.name|get_url(item.id)}}" target="_blank">{{item.title}}</a>


                                    </li><!-- /item -->
                                    {% if not loop.last%}
                                    <div class="divider margin-top-6 margin-bottom-6"><!-- divider --></div>
                                    {%endif%}
                                    {%- endfor %}

                                </ul>
                            </div><!-- /SLIDE 1 -->

                            {%- endfor %}


                        </div>

                    </div>
                </div>

                <!-- BANNER ROTATOR -->
                {{13|show_ad('code')|safe}}
                <!-- /BANNER ROTATOR -->






            </div>

        </div>

    </div>
</section>
<!-- / -->
{% endblock %}

{% block script %}
<script src="/static/assets/plugins/share/js/social-share.min.js"></script>
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="/static/assets/js/view/demo.shop.js"></script>
{% endblock %}
